<template>
  <div style="display: flex">
    <div style="margin-right: 10px">
      <el-date-picker
          v-model="startDate"
          type="date"
          :placeholder="startPlaceholder"
          :disabled-date="startDisabledDate"
          v-bind="$attrs.startOptions"
      >
      </el-date-picker>
    </div>
    <div>
      <el-date-picker
          v-model="endDate"
          type="date"
          :placeholder="endPlaceholder"
          :disabled="endDateDisabled "
          :disabled-date="endDisabledDate"
          v-bind="$attrs.endOptions"
      >
      </el-date-picker>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, watch} from "vue";

let props = defineProps({
  startPlaceholder: {
    type: String,
    default: '请选择开始日期'
  },
  endPlaceholder: {
    type: String,
    default: '请选择结束日期'
  },
  beforeDisabled: {
    type: Boolean,
    default: true
  }
})

let startDate = ref<Date | null>(null)
let endDate = ref<Date | null>(null)
let endDateDisabled = ref<boolean>(true)

let startDisabledDate = (time: Date) => {
  if (props.beforeDisabled) {
    return time.getTime() < Date.now() - 1000 * 60 * 60 * 24
  }
}

let endDisabledDate = (time: Date) => {
  if (startDate.value) {
    return time.getTime() < startDate.value.getTime() + 1000 * 60 * 60 * 24
  }
}

let emits = defineEmits(['startChange', 'endChange'])

watch(() => startDate.value, value => {
  if (!value) {
    endDateDisabled.value = true
    endDate.value = null
  } else {
    endDateDisabled.value = false
    emits('startChange', value)
  }
})

watch(() => endDate.value, value => {
  if (value) {
    emits('endChange', {
      startDate: startDate.value,
      endDate: value
    })
  }
})
</script>

<style scoped>

</style>